在Sass中，可以將CSS一層一層的包起來，不但簡單直覺能直接和HTML的結構做對應，也不用一層一層重複寫
舉例來說，正常的CSS是這樣寫的:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
而在Sass可以直接這樣寫:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
li {
display: inline-block;
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
}
}
這種表示方式就稱為Nesting，只需要將子元素的樣式放在各自的父元素中，這樣不但提升了寫CSS時的方便性，也提升了程式碼的可讀性! 如果是第一次使用Sass，相信光這點就能感受到其魅力，用了就回不去了~
最後我們就來做個小練習，來完成一個簡單的Card(卡片)組件吧
首先打開在components內的_card.scss，貼上下面的Code:
// _card.scss
// 卡片
.card {
display: block;
padding: $base-padding; // 之前變數的文章有寫，不要忘了
margin: $base-margin;
border: 1px solid #ddd;
box-shadow: $base-box-shadow;
border-radius: 20px;
// 卡片標題
.card-title {
font-size: $base-font-size;
padding-bottom: $base-padding;
font-weight: bold;
}
// 卡片內容
.card-body {
font-size: $base-font-size;
a {
text-decoration: underline;
}
}
}
其中我有將陰影和文字大小提成變數，這樣之後要調整就只需要改這邊就好
所以記得在_variables.scss內多宣告變數
// _variables.scss
// font sizes
$base-font-size: 1rem;
// shadow
$base-box-shadow: 1px 3px 5px rgba(0, 0, 0, .1);
樣式都寫好之後就來使用看看吧! 在index.html內寫上:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<title>[Day08] ITHelp Sass</title>
</head>
<body>
<!-- Cards -->
<h2>Cards</h2>
<div class="card">
<h1 class="card-title">This is a title</h1>
<p class="card-body">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque id necessitatibus repudiandae
sunt reprehenderit ipsum possimus magni <a href="#">dignissimos quod</a>? Magnam corrupti quaerat doloribus dolore quisquam
aliquid iusto, libero perferendis tempora.</p>
</div>
</body>
</html>
接著將專案跑起來就可以在頁面上看到一個精美的卡片了~
iThome鐵人賽
看影片追技術